import React, {Component} from 'react';
import {Actions} from 'react-native-router-flux'
import {
  StyleSheet,
  View,
  Text,
    TextInput,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import Colors from '../../assets/colors'
import {Button} from 'antd-mobile'
import {Table, TableWrapper, Row, Rows, Col, Cols, Cell} from 'react-native-table-component';
import mockData from './mockData'
import Pangitor from '../../routes/Pangitor'
import Dialog from '../../routes/DialogTip'

export default class List extends Component<{}> {
  render() {

    const {dialogShow,dialogText,role,pageSize,last,page,list, getId,
      query,setProjectId,changeText,search,prjname} = this.props

    const ele = (value) => (
      <TouchableOpacity onPress={role==='监督站长'?() =>{getId(list[value].projectId)}:() => {
        setProjectId(list[value].projectId);
        Actions.push('tasksList')
        }}>
        <View style={styles.btnContainer}>
            {role==='监督站长'?<Text style={styles.btnZhanZhang}>查看详情</Text>:<Text style={styles.btn}>选择</Text>}
        </View>
      </TouchableOpacity>
    );


    const tableData = list.map((val, index) => {

        let arra = [pageSize*(page-1)+index + 1];
        if(val.tableData.length < 5){
            val.tableData = arra.concat(val.tableData)
            val.tableData.push(ele(index))
        }

        return val.tableData
    })

    return (
      <ScrollView style={styles.container}>
          <View style={{flexDirection:'row',alignItems:'center',marginBottom:10}}>
              <View style={{flex:10,height:50,borderWidth:1,borderColor:Colors.btnPrimaryBg,
                                    borderTopLeftRadius:5,borderBottomLeftRadius:5}}>
                  <TextInput underlineColorAndroid='transparent' style={{paddingRight:0}}
                             value={prjname}
                             placeholder={'请输入工程名称'}
                             onChangeText={(val) =>{changeText(val)}}/>
              </View>
              <View style={styles.searchBt}>
                  <Text style={{fontSize:25,color:'white'}} onPress={() =>{search()}}>搜索</Text>
              </View>
          </View>
        {
          tableData.length>0?
            <View>
              <Table borderStyle={{borderWidth: 0.5, borderColor: Colors.tableColor}}>
                <Row data={mockData.tableHead} flexArr={[1, 7, 3, 3, 2]} style={styles.head} textStyle={styles.text}/>
                <TableWrapper style={{flexDirection: 'row'}}>
                  <Rows data={tableData} flexArr={[1, 7, 3, 3, 2]} style={styles.row} textStyle={styles.itemText}/>
                </TableWrapper>
              </Table>
              {/*分页控件，只需要传四个参数：mainFunction = 请求列表的方法名字，namespace = 当前namespace ， currentPage = 当前页码， totalPage= 总页数*/}
              <Pangitor mainFunction={'getTableList'} namespace={'projectsList'} currentPage={page} totalPage={last} />
            </View>:
            <Text style={{paddingTop:200,textAlign:'center',fontSize:20}}>暂无相关内容</Text>
        }
          {
              dialogText === ''?null:
                  <Dialog isShow={'true'} text={dialogText}/>
          }
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {paddingLeft: 20, paddingRight: 20, marginBottom: 30},
  text: {textAlign: 'center', color: '#fff', fontSize: 22,},
  itemText: {
    textAlign: 'center',
    fontSize: 19,
    marginTop:10,
    marginBottom:10
  },
  row: {
    // height: 48,
    backgroundColor: '#fff'
  },
  btnContainer: {alignItems: 'center', justifyContent: 'center'},
  btn: {
    height: 28, paddingTop: 2, paddingBottom: 2, paddingLeft: 10, paddingRight: 10,
    alignItems: 'center', color: '#fff',
    textAlign: 'center', backgroundColor: Colors.btnPrimaryBg,
    borderRadius: 7, fontSize: 18,
  },
    btnZhanZhang: {
        height: 28, paddingTop: 2, paddingBottom: 2, paddingLeft: 10, paddingRight: 10,
        alignItems: 'center', color: '#fff',
        textAlign: 'center', backgroundColor: Colors.unselectGrayBg,
        borderRadius: 7, fontSize: 18,
    },

  btnText: {textAlign: 'center', color: '#fff', fontSize: 22},
  head: {height: 50, backgroundColor: Colors.navbarBackground,},
  title: {flex: 1, backgroundColor: '#f6f8fa'},
    fenye: {
        height: 35,
        paddingBottom: 2,
        paddingLeft: 25,
        paddingRight: 25,
        alignItems: 'center',
        color: '#fff',
        textAlign: 'center',
        backgroundColor: Colors.btnPrimaryBg,
        borderRadius: 4,
        fontSize: 25
    },
    surJ: {
        marginLeft:10,
        height: 35,
        paddingTop:5,
        paddingBottom: 2,
        paddingLeft: 15,
        paddingRight: 15,
        alignItems: 'center',
        color: '#fff',
        textAlign: 'center',
        backgroundColor: Colors.btnPrimaryBg,
        borderRadius: 4,
        fontSize: 18
    },
    searchBt:{
        alignItems:'center',
        backgroundColor:Colors.btnPrimaryBg,
        paddingTop:8,
        paddingBottom:8,
        paddingLeft:18,
        borderBottomRightRadius:5,
        borderTopRightRadius:5,
        flex:2
    }
});